import React, { Component } from 'react';
import { Button, Col, Divider, Popconfirm, Row, Upload } from 'antd';
import { njzdImgPrefixUrl } from '@/defaultSettings';
import styles from './index.less';
import styled from 'styled-components';
import IconFont from '@/components/IconFont';
import { PhotoProvider, PhotoView } from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css';

const ThumbnailImage = styled.img`
  width: 103px;
  height: 103px;
  cursor: pointer;

  .delBtn {
    margin-left: 16px;
  }
`;

const ThumbnailBox = styled.div`
  width: 103px;
  height: 103px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #e8e8e8;

  .thumbnailBoxImgIcon {
    font-size: 48px;
  }

  .thumbnailBoxLabel {
    font-size: 14px;
    font-weight: bold;
  }
`;

/**
 * 报告单上传与显示组件
 */
class ReportCard extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() { }

  render() {
    const {
      title,
      emptyMsg,
      uploadBtnLabel,
      fileUrl,
      isUploading,
      onDelClick,
      beforeUpload,
      onChange,
      disabled = false,
      delButton,
      // imagePreview表示是否支持图片的预览
      imagePreview = false,
    } = this.props;
    const iconType = this.getThumbnailImageType({ url: fileUrl });
    // 图片上传组件
    const uploadWidgets = (<>
      {fileUrl == '' || fileUrl == null ? <h5>{emptyMsg}</h5> : null}
      {fileUrl == '' || fileUrl == null ? (
        <Upload
          name="file"
          accept=".jpg,.jpeg,.png,.pdf"
          disabled={isUploading}
          showUploadList={false}
          action={`/api/file/file/uploadFile4Report`}
          beforeUpload={beforeUpload}
          onChange={info => {
            onChange({ info });
          }}
        >
          <Button type={'primary'} className={styles.uploadBtn}>
            {uploadBtnLabel}
          </Button>
        </Upload>
      ) : null}
    </>);

    return (
      <div className={styles.reportCard}>
        <div className={styles.reportLabel}>
          <h3>{title}</h3>
        </div>
        <Divider />
        {imagePreview ? (
          <div className={styles.reportBox}>
            {fileUrl && fileUrl != '' ? (
              <Row className={styles.thumbnailImageBox}>
                <Col span={20}>
                  {/*构建显示一张完整的图片*/}
                  <img src={`${njzdImgPrefixUrl}${fileUrl}`} style={{ width: "200px" }} onClick={() => { this.amplifyImg(`${njzdImgPrefixUrl}${fileUrl}`) }} />
                </Col>
                <Col span={4}>
                  {disabled ? (
                    <div></div>
                  ) : (
                    <>
                      <Popconfirm
                        title="确定删除吗?"
                        onConfirm={() => {
                          if (onDelClick) {
                            onDelClick();
                          }
                        }}
                      >
                        <Button type={'danger'} size={'small'} style={{ display: delButton ? 'none' : 'block' }}>
                          删除
                        </Button>
                      </Popconfirm>
                    </>
                  )}
                </Col>
              </Row>
            ) : null}
            {uploadWidgets}
          </div>
        ) : (
          <PhotoProvider bannerVisible={false} maskOpacity={0.9}>
            <div className={styles.reportBox}>
              {fileUrl && fileUrl != '' ? (
                <Row className={styles.thumbnailImageBox}>
                  <Col span={20}>
                    {fileUrl && fileUrl.indexOf('.pdf') > -1 ? (
                      <ThumbnailBox
                        onClick={() => {
                          window.open(`${njzdImgPrefixUrl}${fileUrl}`);
                        }}
                      >
                        <IconFont type={iconType} className={'thumbnailBoxImgIcon'}></IconFont>
                        <span className={'thumbnailBoxLabel'}>点击预览</span>
                      </ThumbnailBox>
                    ) : (
                      <PhotoView src={`${njzdImgPrefixUrl}${fileUrl}`}>
                        <ThumbnailBox>
                          <IconFont type={iconType} className={'thumbnailBoxImgIcon'}></IconFont>
                          <span className={'thumbnailBoxLabel'}>点击预览</span>
                        </ThumbnailBox>
                      </PhotoView>
                    )}
                  </Col>
                  <Col span={4} className={styles.operateBox}>
                    {disabled ? null : (
                      <>
                        {fileUrl && fileUrl.indexOf('.pdf') > -1 ? (
                          <Button
                            onClick={() => {
                              window.open(`${njzdImgPrefixUrl}${fileUrl}`);
                            }}
                            type={'primary'}
                            size={'small'}
                            className={styles.previewBtn}
                          >
                            预览
                          </Button>
                        ) : (
                          <PhotoView src={`${njzdImgPrefixUrl}${fileUrl}`}>
                            <Button type={'primary'} size={'small'} className={styles.previewBtn}>
                              预览
                            </Button>
                          </PhotoView>
                        )}

                        <Popconfirm
                          title="确定删除吗?"
                          onConfirm={() => {
                            if (onDelClick) {
                              onDelClick();
                            }
                          }}
                        >
                          <Button type={'danger'} size={'small'}>
                            删除
                          </Button>
                        </Popconfirm>
                      </>
                    )}
                  </Col>
                </Row>
              ) : null}
              {uploadWidgets}
              {/*{fileUrl == '' || fileUrl == null ? <h5>{emptyMsg}</h5> : null}*/}
              {/*{fileUrl == '' || fileUrl == null ? (*/}
              {/*  <Upload*/}
              {/*    name="file"*/}
              {/*    accept=".jpg,.jpeg,.png,.pdf"*/}
              {/*    disabled={isUploading}*/}
              {/*    showUploadList={false}*/}
              {/*    action={`/api/file/file/uploadFile4Report`}*/}
              {/*    beforeUpload={beforeUpload}*/}
              {/*    onChange={info => {*/}
              {/*      onChange({ info });*/}
              {/*    }}*/}
              {/*  >*/}
              {/*    <Button type={'primary'} className={styles.uploadBtn}>*/}
              {/*      {uploadBtnLabel}*/}
              {/*    </Button>*/}
              {/*  </Upload>*/}
              {/*) : null}*/}
            </div>
          </PhotoProvider>
        )}
      </div>
    );
  }

  /**
   * 获取缩率图的文件类型
   * @param url
   * @returns {string}
   */
  getThumbnailImageType = ({ url }) => {
    if (url) {
      const arr = url.split('.');
      const ext = arr[arr.length - 1];
      if (ext == 'pdf') {
        return 'icon-pdf';
      } else {
        return 'icon-charutupian';
      }
    }
    return '';
  };
  amplifyImg=(data)=>{
    const a = document.createElement('a');
    a.target = '_blank';
    a.href = data;
    a.click();
  }
}

export default ReportCard;
